<template>
	<view class="parent col">
		<u--form labelPosition="left" :model="info" :rules="rules" ref="uForm">
			<u-form-item label="手机号" prop="mobile"  :labelWidth="labelWidth" :borderBottom="true">
				<input class="input" placeholder="请输入" placeholder-class="place" v-model="info.mobile"/>
			</u-form-item>
			<u-form-item label="验证码" prop="code" :labelWidth="labelWidth" :borderBottom="true">
				<view class="row-w-center">
					<input class="input" placeholder="请输入" placeholder-class="place"  v-model="info.code" />
					<view class="code" @click="countTime">
						{{countdown==60?'获取验证码': countdown+'S'}}
					</view>
				</view>
			</u-form-item>
			<u-form-item label="登录账号" prop="account"  :labelWidth="labelWidth" :borderBottom="true">
				<input class="input" placeholder="请输入登录账号" placeholder-class="place" v-model="info.account"/>
			</u-form-item>
			<u-form-item label="登录密码" prop="password"  :labelWidth="labelWidth" :borderBottom="true">
				<input class="input" placeholder="请输入登录密码" placeholder-class="place" v-model="info.password"/>
			</u-form-item>
			<u-form-item label="确认密码" prop="password2"  :labelWidth="labelWidth" :borderBottom="true">
				<input class="input" placeholder="请再次输入登录密码" placeholder-class="place" v-model="info.password2"/>
			</u-form-item>
		</u--form>
			<view class="row-h-center" style="margin-top: 48rpx;">
				<image :src="check?'/static/images/check_y.png':'/static/images/check_n.png' " class="check" @click="check=!check"></image>
				<view class="agree" style="margin-left: 12rpx;">
					我已阅读并同意 <span class="blue">《用户服务协议》》</span>
				</view>
			</view>
			<view class="btn row-center" @click="goRegiste">
				确认
			</view>
			<view class="other row-center" @click="goBack">
				账号密码登录
			</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				info:{
					mobile:'',
					code:'',
					account:'',
					password:'',
					password2:'',
				},
				check:false,
				rules: {
					'mobile': {
						type: 'string',
						required: true,
						message: '请输入手机号',
						trigger: ['blur', 'change']
					},
					'code': {
						type: 'string',
						required: true,
						message: '请输入验证码',
						trigger: ['blur', 'change']
					},
					'password': {
						type: 'string',
						required: true,
						message: '请输入密码',
						trigger: ['blur', 'change']
					},
					'password2': {
						type: 'string',
						required: true,
						message: '请再次输入密码',
						trigger: ['blur', 'change']
					},
				},
				labelWidth:120,
				timer: null,
				countdown:60,
			}
		},
		methods: {
			goRegiste(){
					this.$refs.uForm.validate().then(res => {
								uni.$u.toast('校验通过')
								uni.navigateTo({
									url:'/src/pages/other/registeStatus'
								})
							}).catch(errors => {
								uni.$u.toast('校验失败')
					})
			},
			countTime(){
				this.timer = setInterval(() => {
					if (this.countdown === 1) {
						this.clearTimer(); //关闭定时器
						this.count = 60
					} else {
						this.loading();
					}
				}, 1000);
			},
			loading() {
				//启动定时器
				this.countdown--; //定时器减1
			},
			goBack(){
				uni.navigateBack()
			},
			clearTimer() {
				//清除定时器
				clearInterval(this.timer);
				this.timer = null;
			},
		}
	}
</script>
<style>
	page{
		background-color: white;
	}
</style>
<style scoped lang="scss">
	.parent{
		padding: 36rpx;
	}
.input{
	color: #C9CCD5;
	font-size: 28rpx;
	font-style: normal;
	font-weight: 400;
	line-height: 48rpx; /* 171.429% */
}
.code{
	color:  #2653A4;
	font-size: 28rpx;
	font-style: normal;
	font-weight: 400;
	line-height: 44rpx; 
}
.check{
	width: 28rpx;
	height: 28rpx;
}
.agree{
	color: #000;
	font-size: 24rpx;
	font-style: normal;
	font-weight: 400;
	line-height: 36rpx; /* 150% */
}
.blue{
	margin-top: 48rpx;
	color: #2653A4;
	font-size: 24rpx;
	font-style: normal;
	font-weight: 400;
	line-height: 36rpx;
}
.btn{
	margin-top: 48rpx;
	width: 100%;
	height: 92rpx;
	flex-shrink: 0;
	border-radius: 32rpx;
	background: #3B60D3;
	color: #FFF;
	font-size: 32rpx;
	font-style: normal;
	font-weight: 400;
	line-height: 44rpx; /* 137.5% */
}
.other{
	margin-top: 48rpx;
	color: #17161B;
	font-size: 28rpx;
	font-style: normal;
	font-weight: 400;
	line-height: 48rpx; /* 171.429% */
}
</style>
